<template>
  <div>
    <!-- 传递 props 控制样式 -->
    <styleStep1 v-if="show && step == 1" :rect="rect"> </styleStep1>
    <styleStep1_tip class="transtion styleStep1_tip" :rect="rect"
      >点击“学生得分”查看学生课程中得分
    </styleStep1_tip>
  </div>
</template>

<script>
import styled from "vue-styled-components";

// 定义 props
const step1DivProps = {
  rect: Object,
};
const styleStep1 = styled("div", step1DivProps)`
  width: 100%;
  height: 100vh;
  z-index: 9999;
  position: fixed;
  background: rgba(0, 0, 0, 0.6);
  top: 0;
  left: 0;
  // 使用 CSS 变量动态设置 mask 位置和大小
  -webkit-mask: radial-gradient(
    circle at ${(props) => props.rect.left + 20 + "px"}
      ${(props) => props.rect.top + 15 + "px"},
    transparent 40px,
    black 41px
  );
  mask: radial-gradient(
    circle at ${(props) => props.rect.left + 20 + "px"}
      ${(props) => props.rect.top + 15 + "px"},
    transparent 40px,
    black 41px
  );
`;
// 根据 props 动态设置样式
const styleStep1_tip = styled("div", step1DivProps)`
  background: url(${require("./assets/images/group_icon/onboardingGuide_step1.png")});
  background-size: 336px 123px;
  width: 336px;
  height: 123px;
  position: fixed;
  left: ${(props) => props.rect.left + 20 - 40 - 237 + "px"};
  top: ${(props) => props.rect.top + 15 - 40 + 80 + "px"};
  z-index: 11000;
  box-sizing: border-box;
  padding: 83px 0 0 16px;

  font-family: PingFangSC, PingFang SC, sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: #ffffff;
  line-height: 25px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
  font-style: normal;
`;

export default {
  components: {
    styleStep1,
    styleStep1_tip,
  },
  props: {
    show: Boolean, // 控制引导层是否显示
    rect: Object, // 包含 left, top, width, height 的对象
    step: [String, Number], // 引导步骤
  },
};
</script>
<style lang="scss" scoped>
.opacity1 {
  opacity: 1;
}
.opacity0 {
  opacity: 0;
}
.transtion {
  transition: all 0.3s ease-in-out;
}
.styleStep1_tip {
}
</style>
